<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>QQ简易聊天框</title>
		<link rel="stylesheet" href="../css/chat.css">
	</head>
	<body>
		<section id="chat">
			<div class="chatBody"></div>
			<div><img src="../img/icon.jpg"></div>
			<textarea class="chatText"></textarea>
			<div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
		</section>
		<script src="jquery.3.6.3.js"></script>
		<script>
			$(function(){
				var $imgs = new Array("img/head01.jpg", "img/head02.jpg", "img/head03.jpg");
				var $name = new Array("索隆", "路飞", "山治");
				$("#send").click(function() {
					var $people = parseInt(Math.random() * 3);
					var $text = $(".chatText").val();
					if ($text.length == "") {
						return;
					} else {
						var $currentstr = $(".chatBody").append("<div><img  src='" + $imgs[$people] + "'/>" + $name[$people] +
							"<br/><p >" + $text + "</p></div>");
						$(".chatBody p").addClass("a");
						$("textarea").val("");
					}
				});
			});
		</script>
	</body>
</html>
